<template>
	<view class="user_container">
		<view class="user_bgposition">
			<image style="width: 100%; z-index: 1; position: absolute;top: 0;left: 0;"
				src="https://daiyue.gzzhenyi.net/static/image/user/headBg@4x.png" mode="widthFix"></image>
			<view class="author_msg" v-if="user.token">
				<image style="width: 140rpx;height: 140rpx;margin-left: 30rpx; border-radius: 50%; " :src="user.avatar"
					mode="aspectFill" @error="avatarError"></image>
				<view class="right">
					<view class="msg_top">
						<text>{{ user.nickName }}</text>
						<view class="setting" @tap="toSetting">
							<van-icon style="margin-right: 10rpx;" name="setting-o" />
							<text>设置</text>
						</view>
					</view>
					<view class="bottom">
						<view class="bottom_location" @tap="toAttention">
							<image style="width: 40rpx;height: 44rpx;"
								src="https://daiyue.gzzhenyi.net/static/image/user/shop.png" mode="aspectFit"></image>
							<text>关注店铺</text>
						</view>
						<view class="bottom_location" @tap="toCollection">
							<image style="width: 36rpx;height: 44rpx;"
								src="/static/index/collection.png" mode="aspectFit"></image>
							<text>收藏商品</text>
						</view>
					</view>
				</view>
			</view>
			<view class="author_msg" v-else>
				<image style="width: 120rpx;height: 120rpx;margin-left: 40rpx; border-radius: 50%; "
					src="https://daiyue.gzzhenyi.net/static/image/user/mask.png" mode="aspectFill"></image>
				<view class="right">
					<view class="msg_top">
						<text>请登录/注册</text>
						<view class="setting" @tap="toSetting">
							<van-icon style="margin-right: 10rpx;" name="setting-o" />
							<text>设置</text>
						</view>
					</view>
					<view style="width: 150rpx;">
						<button class="bottom-login" @tap="toLogin" open-type="login">去登陆</button>
					</view>
				</view>
			</view>
			<!-- vip -->
			<view class="vip_card" v-if="user.token">
				<image @tap="toMember" style="width: 732rpx;height: 440rpx;position: absolute;top: 0;left: 0;"
					src="https://daiyue.gzzhenyi.net/uploads/20241108/95797bf4b30ac29e5616d4f6fffca819.png" mode=""></image>
				<view class="vip_top" @tap="toMember" v-if="item.group_id == 0">
					<text>成为会员</text>
					<text>尊享会员权益</text>
				</view>
				<view class="vip_top" v-if="item.group_id == 1">
					<text>爱贝贝·{{item.vip_prev_text}}{{item.vip_code}}</text>
					<text>{{vip.c_text}}</text>
				</view>
				<view class="vip_top" style="top: 365rpx;" v-if="item.group_id == 2">
					<view style="display: flex;">
						<text>大拇指·{{item.vip_prev_text}}{{item.vip_code}}</text>
						<text style="margin-left: 30rpx;">{{vip.b_text}}</text>
					</view>
					<image @click="toInvite" :src="baseUrl + item.invite_qrcode" style="width: 60rpx;height: 60rpx;" mode="aspectFill"></image>
				</view>
			</view>
			<!-- order -->
			<view class="my_order" :style="user.token ? ' ' : 'top: 360rpx;'">
				<view class="title">
					<text>我的订单</text>
					<view class="all" @tap="toOrder(0)">
						<text>全部</text>
						<van-icon color="#999999" name="arrow" />
					</view>
				</view>

				<view class="ul_all">
					<!-- <view class="item_li" @tap="toOrder(1)">
						<van-icon style="position: absolute;top: 10rpx;right: 20rpx;" info="1"></van-icon>
						<image style="width: 80rpx;height: 72rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/daifukuan.png" mode="aspectFit">
						</image>
						<text>待付款</text>
					</view>
					<view class="item_li" @tap="toOrder(2)">
						<van-icon style="position: absolute;top: 10rpx;right: 20rpx;" info="1"></van-icon>
						<image style="width: 80rpx;height: 72rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/daifahuo.png" mode="aspectFit">
						</image>
						<text>待发货</text>
					</view>
					<view class="item_li" @tap="toOrder(3)">
						<van-icon style="position: absolute;top: 10rpx;right: 20rpx;" info="1"></van-icon>
						<image style="width: 80rpx;height: 72rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/daishouhuo.png" mode="aspectFit"></image>
						<text>待收货</text>
					</view>
					<view class="item_li" @tap="toOrder(4)">
						<van-icon style="position: absolute;top: 10rpx;right: 20rpx;" info="1"></van-icon>
						<image style="width: 80rpx;height: 72rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/daipinjia.png" mode="aspectFit">
						</image>
						<text>待评价</text>
					</view> -->
					<view class="item_li" @tap="toOrder(item.state)" v-for="(item, i) in orderList.slice(0, 4)"
						:key="i">
						<van-icon v-if="item.count > 0" style="position: absolute;top: 10rpx;right: 20rpx;"
							:info="item.count"></van-icon>
						<image style="width: 80rpx;height: 72rpx;" :src="baseUrl + item.icon" mode="aspectFit">
						</image>
						<text>{{item.state_name}}</text>
					</view>
				</view>
			</view>
			<!-- li -->
			<view class="li_msg" :style="user.token ? ' ' : 'top: 610rpx;'">
				<view class="li_item" @tap="toDistribuyion">
					<view class="li_item_left">
						<image style="width: 36rpx;height: 32rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/fengxiao@4x.png" mode="aspectFit">
						</image>
						<text>分销中心</text>
					</view>
					<van-icon name="arrow" />
				</view>
				<view class="li_item" @tap="toMessags">
					<view class="li_item_left">
						<image style="width: 36rpx;height: 32rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/liuyang@4x.png" mode="aspectFit"></image>
						<text>留言</text>
					</view>
					<van-icon name="arrow" />
				</view>
				<view class="li_item" @tap="toAddress">
					<view class="li_item_left">
						<image style="width: 36rpx;height: 32rpx;"
							src="https://daiyue.gzzhenyi.net/static/image/user/loca.png" mode="aspectFit"></image>
						<text>收货地址</text>
					</view>
					<van-icon name="arrow" />
				</view>
			</view>
		</view>
		<view class="guess" v-if="user.token">
			<view class="likeimages" style="margin-top: 50upx;">
				<image src="https://daiyue.gzzhenyi.net/static/index/Guess.svg" mode="scaleToFill" />
			</view>
			<guess-like />
		</view>
		<view class="kfbottom">
			<button class="custom-button" type="default" plain="true" open-type="contact">
				<image src="/static/index/contact.png" mode="widthFix"></image>
			</button>
		</view>
	</view>
</template>

<script>
	import guessLike from "@/components/cart/guessLike.vue"
	import {
		getWxLogin,
		getUserInfo,
		getOrderCount,
		getVip
	} from '@/api/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import baseUrl from '@/api/baseUrl.js'
	export default {
		components: {
			guessLike
		},
		data() {
			return {
				baseUrl,
				item: {},
				orderList: [],
				vip:{},
				baseUrl:''
			}
		},
		computed: {
			...mapState(['user']),

		},
		onLoad(options) {
			this.baseUrl = baseUrl;
		},
		onShow(){
			if (this.user && this.user.token) {
				this.getUser()
				this.getCount();
				this.getVipInfo();
			}
		},
		methods: {
			...mapMutations('user', ['changeAvatar', 'changeNickName', 'changeMobile', 'changeToken', 'changeOpenid']),
			toDistribuyion() {
				uni.navigateTo({
					url: "/pages/distribution/distribution"
				})
			},
			toInvite(){
				uni.navigateTo({
					url:"/pages/distribution/recommend"
				})
			},
			getVipInfo(){
				getVip().then(res=>{
					if(res.code == 1){
						this.vip = res.data;
					}
				})
			},
			getUser() {
				getUserInfo().then(res => {
					if (res.code == 1) {
						this.item = res.data
					}
				})
			},
			getCount() {
				getOrderCount().then(res => {
					if (res.code == 1) {
						console.log(res)
						this.orderList = res.data;
						console.log(this.orderList)
					}
				})
			},
			toMember() {
				uni.navigateTo({
					url: "/pages/member/member"
				})
			},

			toOrder(state) {
				uni.navigateTo({
					url: `/pages/order/orderList?state=${state}`
				})
			},

			toAttention() {
				uni.navigateTo({
					url: "/pages/attention/attention"
				})
			},
			toSetting() {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},

			toLogin(e) {
				console.log(e)
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						getWxLogin({
							code: res.code
						}).then(resUser => {
							console.log(resUser)
							if (resUser.code == 1) {
								console.log(resUser)
								this.changeToken(resUser.data.userinfo.token)
								this.changeAvatar(this.baseUrl + resUser.data.userinfo.avatar)
								this.changeNickName(resUser.data.userinfo.nickname)
								this.changeMobile(resUser.data.userinfo.mobile)
								this.changeOpenid(resUser.data.userinfo.openid)
								this.getUser();
								console.log(this.user.token)
							}
						})

						// uni.navigateTo({
						// 	url: '/pages/login/login'
						// })
					}
				})
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
			},
			avatarError() {
				this.changeAvatar(this.baseUrl + '/static/image/user/mask.png')
			},
			toAddress() {
				uni.navigateTo({
					url: "/pages/location/address"
				})
			},
			toCollection() {
				uni.navigateTo({
					url: "/pages/collection/collection"
				})
			},
			toMessags() {
				uni.navigateTo({
					url: "/long/leave/leave"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_container {
		width: 100%;
		overflow: auto;
	}

	.user_bgposition {
		position: relative;
		height: 1410rpx;
	}

	.li_msg {
		position: absolute;
		z-index: 2;
		top: 1050rpx;
		width: 710rpx;
		left: 20rpx;

		.li_item {
			display: flex;
			align-items: center;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx;
			justify-content: space-between;
			border-radius: 24rpx;
			box-shadow: 0 0 2rpx 0 #eee;

			.li_item_left {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}
	}

	.my_order {
		position: relative;
		z-index: 2;
		top: 810rpx;
		left: 20rpx;
		width: 670rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 24rpx;
		box-shadow: 0 0 4rpx 0 #eee;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			.all {
				text {
					font-size: 28rpx;
					font-weight: normal;
					line-height: 28rpx;
					text-align: right;
					color: #999999;
				}
			}
		}

		.ul_all {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 34rpx;

			.item_li {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					display: inline-block;
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.vip_card {
		position: relative;
		z-index: 2;
		top: 362rpx;
		left: 12rpx;

		.vip_foot {
			position: absolute;
			z-index: 4;
			top: 280rpx;
			left: 56rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			line-height: 28rpx;
			color: #604C2C;
		}

		.vip_top {
			position: absolute;
			z-index: 4;
			top: 380rpx;
			left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 700rpx;
			text {
				display: inline-block;
				font-size: 25rpx;
				line-height: 28rpx;
				color: rgb(37,37,37);
				font-weight: bold;
			}

			.bf {
				text {
					font-size: 38rpx;
					color: #4C3818;
				}
			}
		}

		.vip_img {
			position: absolute;
			width: 322upx;
			height: 222upx;
			top: 0;
			left: 50%;
			transform: translateX(20%);
		}
	}

	.author_msg {
		position: absolute;
		z-index: 2;
		top: 202rpx;
		display: flex;
		align-items: center;

		.bottom-login {
			font-size: 24upx;
			color: #FF6200;
			border-radius: 20upx;
			border: 1px solid #FF6200;
			width: 135upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			margin-top: 10upx;

		}

		.right {
			width: 520rpx;
			margin-left: 20rpx;

			.msg_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 30rpx;
					color: #333333;
				}

				.setting {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						color: #5C5C5C;
					}
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.bottom_location {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #5C5C5C;
					margin-right: 30rpx;

					image {
						margin: 0 10rpx 0 0;
					}
				}
			}
		}
	}

	.guess {
		position: absolute;
	}

	.likeimages {
		width: 500upx;
		margin: 0 auto;

		image {
			width: 500upx;
			height: 42upx;
		}
	}

	.kfbottom {
		position: fixed;
		bottom: 0;
		right: 2%;
		z-index: 999;
		.custom-button {
			border: none !important;
			padding: 0 !important;
			line-height: normal;

			image {
				width: 117rpx;
				height: 117rpx;
				object-fit: cover;
			}
		}
	}
</style>